<template>
	<view>
		<u-navbar title-color="#000000" :borderBottom="false" titleColor="#000000" :title="title" backIconSize="40"
		 back-icon-color="#000000" :background="background"></u-navbar>
		<view class="top" :class="state==0?'vip1':'vip2'">
			<view class="up">
				<view class="title">
					蜂盈会员卡
				</view>
				<view class="name">
					FENGYING  VIP CARD
				</view>
				<view class="text">
					快速申卡/实惠多多/尊享权益
				</view>
			</view>
			<view class="swiper" v-if="state==0">
				<view class="v2">
					<view class="name">
						{{vipList[1].title}}
					</view>
					<view class="number">
						{{vipList[1].price}} <text>{{type}}</text>
					</view>
				</view>
				<view class="v3" v-if="false">
					<view class="name">
						{{vipList[0].title}}
					</view>
					<view class="number">
						{{vipList[0].price}}<text>{{type}}</text>
					</view>
				</view>
			</view>
			<view class="swiper2" v-else-if="state==1">
				<view class="v3">
					<view class="name">
						{{vipList[0].title}}
					</view>
					<view class="number">
						{{vipList[0].price}}<text>{{type}}</text>
					</view>
					<!-- <view class="text">
						剩余{{info.day}}天到期，请及时续费哦~
					</view> -->
				</view>
			</view>
			<view class="swiper2" v-else-if="state==2">
				<view class="v2">
					<view class="name">
						{{vipList[1].title}}
					</view>
					<view class="number">
						{{vipList[1].price}}<text>{{type}}</text>
					</view>
					<!-- <view class="text">
						剩余{{info.day}}天到期，请及时续费哦~
					</view> -->
				</view>
			</view>
		</view>
		
		<view class="content">
			<view style="padding:0rpx 40rpx;">
				<view class="top_title bg_color1" v-if="state==0">
					 <text class="text1">周卡</text> <text class="text2">{{vipList[0].price}} </text> <text class="text3"> {{type}} </text>
				</view>
				<view class="top_title1 bg_color2" v-if="state==1">
					 剩余<text class="day_color1">{{info.day}}天</text>到期，请及时续费哦~
				</view>
				<view class="top_title1 bg_color3" v-if="state==2">
					 剩余<text class="day_color2">{{info.day}}天</text>到期，请及时续费哦~
				</view>
				</view>			
			<view style="padding:0rpx 40rpx;border-radius:50rpx;background-color: white;">
				<view class="title">
					尊享权益
				</view>
				<view class="vip">
					<view class="list" @click="buyVip(vipList[0].vid)">
						<view class="up upbg1">
							<image src="../static/v5.png" mode=""></image>
							<view class="name">
								产出增加
							</view>
							<view class="text">
								产出每次最高
							</view>
							<view class="number">
								增加 <text class="color1">2%</text>
							</view>
						</view>
						<view class="down" v-if="state==0" 
						style="background: linear-gradient(90deg, #E8C287, #F6E2BF);box-shadow: 0px 6px 8px 0px rgba(170, 170, 170, 0.16);color:#824316;">
							{{vipList[0].price}} <text> {{type}} </text> 开通{{vipList[0].title}}
						</view>
					</view>
					<view class="list" @click="buyVip(vipList[1].vid)" style="margin-left: auto;">
						<view class="up upbg2">
							<image src="../static/v6.png" mode=""></image>
							<view class="name">
								推荐增益
							</view>
							<view class="text">
								VIP用户比普通
							</view>
							<view class="number">
								<!-- 用户多 <text class="font color2">2%</text> -->
								用户多 <text class="color2">2%</text>
							</view>
						</view>
						<view class="down" v-if="state==0" 
						style="background: linear-gradient(90deg, #272B39, #3E4459);box-shadow: 0px 6px 8px 0px rgba(170, 170, 170, 0.16);color:#F3DBA2;">
							{{vipList[1].price}} <text> {{type}} </text> 开通{{vipList[1].title}}
						</view>
					</view>
				</view>
			</view>
			<view class="xufei" @click="buyVip(vipList[(state-1)].vid)" v-if="state==1||state==2" 
			:class="[state== 1 ?'xufeibg1':'xufeibg2']">
				续费{{vipList[(state-1)].title}}
			</view>
		</view>
		
		<u-keyboard mode="number" :dot-enabled="false" v-model="pay" :tooltip="false" @change="onChange" @backspace="onBackspace">
			<view>
				<view class="u-text-center">
					<view class="u-text-name">
						二级密码
					</view>
					<view class="u-text-text">
						您当前正在进行交易，为确保账户安全请输入二级 密码验证身份
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips"></view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				state: 0,
				background: {
					'background': 'transparent'
				},
				title: "",
				list: [{
					image: '../static/v2.png'
				}, {
					image: '../static/v3.png'
				}],
				vipList: [{
					price: 0
				}, {
					price: 0
				}],
				pay: false,
				password: "",
				info: {},
				type: "Fmb",
				url: ""
			}
		},
		onLoad(option) {
			than = this;
			if (option.type) {
				than.type = option.type
			}
			if (option.state) {
				than.state = parseInt(option.state)
			}
			var url = "";
			if (than.type == "Ghy") {
				than.url = "api/Goldbean/buyVip";
				url = "api/Goldbean/vipList"
			} else {
				than.url = "api/vip/buyVip";
				url = "api/vip/vipList"
			}
			than.post(url, null, function(data) {
				than.vipList = data;
			})

			than.post("api/vip/userVip", null, function(data) {
				if (data.expire != 0 && data.expire != "0") {
					data.day = Math.floor(than.div(than.sub(data.expire, Math.floor(new Date().getTime() / 1000)), 86400))
				} else {
					data.day = 0
				}
				than.info = data;
				than.state = data.user_vip_status
			})

		},
		methods: {
			buyVip(vid) {
				than.vid = vid;
				than.pay = true;
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					than.$u.throttle(than.getResult,2000);

				}
			},
			getResult() {
				 than.post(than.url, {
					vid: than.vid,
					pay_password: than.password
				}, function(data) {
					than.pay = false;
					than.toast(data)
					setTimeout(function() {
						uni.navigateBack();
					}, 1500);
				})
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			}
		}
	}
</script>

<style lang="less">
	.content {
		margin-top: 600rpx;
		position: relative;
		z-index: 10;
		border-radius: 25rpx 25rpx 0px 0px;
		height: 800rpx;
		// background: white;
		.bg_color1{
			background-image:url(../static/vip_bg2.png);
			color: #3E4554;
		}
		.bg_color2{
			background-image:url(../static/vip_bg4.png);
			color:white;
		}
		.bg_color3{
			background-image:url(../static/vip_bg3.png);
			// color:#F4F7FF;
			color:#3E4554;
			
		}
		.top_title{
			height: 99rpx;
			background-color:#E5EEFF;
			border-radius: 25rpx 25rpx 0px 0px;		
			background-size: 100% 100%;
			text-align: right;
			line-height: 99rpx;
			padding-right:40rpx;
			
			.text1{			
				font-size: 26rpx;
				font-weight: bold;
			}
			.text2{
				font-size: 36rpx;
				font-family: Myriad Pro;
				font-weight: 400;
				color: #3E4554;
				margin: 0px 10rpx;
			}
			.text3{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #3E4554;
			}
		}
		.top_title1{
			height: 99rpx;
			background-color:#E5EEFF;
			border-radius: 25rpx 25rpx 0px 0px;
			background-size: 100% 100%;
			text-align: left;
			line-height: 99rpx;
			padding-left:40rpx;
			.day_color1{
				color:#FB683D;
			}
			.day_color2{
				color:#13AB7C;
			}
			.text1{			
				font-size: 26rpx;
				font-weight: bold;
			}
			.text2{
				font-size: 36rpx;
				font-family: Myriad Pro;
				font-weight: 400;
				color: #3E4554;
				margin: 0px 10rpx;
			}
			.text3{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #3E4554;
			}
		}
		.title {
			height: 140rpx;
			font-size: 48rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 140rpx;
			text-align: center;
		}

		.xufei {
			width: 314rpx;
			height: 80rpx;
			background: #333333;
			box-shadow: 0px 6rpx 8rpx 0px rgba(170, 170, 170, 0.16);
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			color: #ffffff;
			font-size: 32rpx;
			font-weight: bold;
			margin: 46rpx auto 0;
		}
		.xufeibg1{	
			background: linear-gradient(90deg, #E8C287, #F6E2BF);
			box-shadow: 0px 6px 8px 0px rgba(170, 170, 170, 0.16);
			color: #824316;
		}
		.xufeibg2{
			background: linear-gradient(90deg, #272B39, #3E4459);
			box-shadow: 0px 6px 8px 0px rgba(170, 170, 170, 0.16);
			color: #F3DBA2;
		}
		

		.vip {
			display: flex;
			align-items: center;
			.list {
				width: 321rpx;
                .upbg1{
					background: linear-gradient(-52deg, #FFFFFF, #FFF6E5);
				}
				.upbg2{					
                    background: linear-gradient(-52deg, #FFFFFF, #E5EEFF);
				}
				.up {
					// background: #FFFFFF;
					width: 100%;
					height: 331rpx;
					text-align: center;
					border-radius: 20rpx;					
                    

					image {
						margin: 30rpx 0 20rpx;
						width: 116rpx;
						height: 116rpx;
					}

					.name {
						margin-bottom: 10rpx;
						font-size: 36rpx;
						font-weight: bold;
						color: #333333;
					}

					.text {
						font-size: 24rpx;
						font-weight: 500;
						color: #333333;
					}

					.number {
						font-size: 24rpx;
						font-weight: 500;
						color: #333333;

						text {
							color: #FEC31D;
						}				
						.color1{
							color:#F56336;
							font-size: 32rpx;
							font-weight: bold;
						}
						.color2{
							color:#205FFA;
							font-size: 32rpx;
							font-weight: bold;
						}
					}
				}

				.down {
					margin-top: 46rpx;
					width: 314rpx;
					height: 80rpx;
					border-radius: 40rpx;
					font-size: 32rpx;
					line-height: 80rpx;
					font-weight: bold;
					
					text-align: center;

					text {
						font-size: 31rpx;
					}
				}
			}
		}
	}

	.swiper2 {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 430rpx;
		padding:0px 40rpx;
		.v2 {
			background-image: url(../static/v2.png);
			background-size: 100% 100%;
			width: 100%;
			height: 389rpx;
			color:white;
	
			.name {
				margin-top: 150rpx;
				padding: 0 45rpx;
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}
	
			.number {
				margin-top:10rpx;
				padding: 0 45rpx;
				font-size: 60rpx;
	
				text {
					margin-left:10rpx;
					font-size: 30rpx;
				}
			}
		}
	
		.v3 {
			background-image: url(../static/v3.png);
			background-size: 100% 100%;
			width: 100%;
			height: 389rpx;
			color: #333333;
	
			.name {
				margin-top: 150rpx;
				padding: 0 45rpx;
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}
	
			.number {
				margin-top:10rpx;
				padding: 0 45rpx;
				font-size: 60rpx;
			
				text {
					margin-left:10rpx;
					font-size: 30rpx;
				}
			}
		}
	}

	.swiper {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 430rpx;
        padding:0px 40rpx;
		.v2 {
			background-image: url(../static/v2.png);
			background-size: 100% 100%;
			width: 100%;
			height: 389rpx;
			color: #FFFFFF;

			.name {
				margin-top: 150rpx;
				padding: 0 45rpx;
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}

			.number {
				margin-top:10rpx;
				padding: 0 45rpx;
				font-size: 60rpx;

				text {
					margin-left:10rpx;
					font-size: 30rpx;
				}
			}
		}

		.v3 {
			background-image: url(../static/v2.png);
			background-size: 100% 100%;
			width: 100%;
			height: 389rpx;
			color: #FFFFFF;

			.name {
				margin-top: 150rpx;
				padding: 0 45rpx;
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}

			.number {
				margin-top:10rpx;
				padding: 0 45rpx;
				font-size: 60rpx;
			
				text {
					margin-left:10rpx;
					font-size: 30rpx;
				}
			}
		}
	}

	.vip1 {
		background-image: url(../static/vip_bg.png);
	}

	.vip2 {
		background-image: url(../static/vip_bg.png);
	}

	.top {
		width: 100%;
		height: 900rpx;
		position: absolute;
		top: 0;
		/* #ifdef APP-PLUS */
		padding-top: calc(100rpx + var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		padding-top: 100rpx;
		/* #endif */
		background-size: 100% 100%;


		.up {
			text-align: center;
			font-weight: bold;
			color: #111111;

			.title {
				font-size: 64rpx;							
				background: linear-gradient(0deg, #DCA27A 0%, #AB5D2D 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.name {
				margin: 20rpx 0 30rpx;
				font-size: 40rpx;							
				background: linear-gradient(0deg, #DCA27A 0%, #AB5D2D 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.text {
				font-size: 26rpx;			
                color: #AE9764;
			}
		}
	}

	.swiper {
		/* #ifdef APP-PLUS */
		padding-top: calc(20rpx + var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		padding-top: 100rpx;
		/* #endif */

	}
	.swiper2 {
		/* #ifdef APP-PLUS */
		padding-top: calc(20rpx + var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		padding-top: 100rpx;
		/* #endif */
	
	}
</style>
